<template>
  <header class="all_nav_zone" id="header">
    <router-link to="/index" class="city_chang">上海</router-link>
    <div class="input_bod">
      <input type="text" name="search" id="hed_search" class="hed_search_text" placeholder="搜索" />
    </div>
    <router-link to="/login" class="hed_login">登录</router-link>
  </header>
</template>

<script>
export default{
  data(){
    return{}
  }
}
</script>

<style lang="scss" scoped>
header{
  width:100%;
  height:4rem;
  position:fixed;
  top: 0;
  background:#f42424;
  padding:.5rem 0;
  z-index:999999;
  display: flex;
  align-items:center;
  max-width: 640px;

  .city_chang{
    font-size:1.5rem;
    color:#fff;
    background:url(../../../static/img/city_change.png) no-repeat;
    background-size: 12px 7px;
    float: left;
    padding: 0 1.5rem 0 1.2rem;
    background-position: right .6rem; 
  }

  .hed_login{
    float: right;
    color:#fff;
    font-size:1.5rem;
    height:2.5rem;
    line-height: 2.5rem;
    position: absolute;
    right:1.2rem;
  }

  .input_bod{
    margin-left: 3rem;
    width:calc(100% - 15rem);
    margin-top: .2rem;

    .hed_search_text{
      width:100%;
      height:2rem;
      font-size: 1rem;
      color: #fff;
      border-radius: 2rem;
      padding:.5rem 1rem .5rem 2.3rem;
      background: url(../../../static/img/index_header_sear.png) no-repeat 7px center #a20407;
      background-size: 14px 14px;
      box-sizing: border-box;
    }
  }
}
</style>
